<!-- 阶梯价格 -->
<template>
  <div>
    <div class="title pl0">
      <h3>阶梯价格</h3>
      <el-button
        type="text"
        v-if="isDisable && isLocked == '待锁定'"
        @click="handleEdit"
        >编辑</el-button
      >
    </div>
    <el-table
      :data="priceModelForm.productSteppedPriceInfoList"
      border
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column
        prop="productSteppedCount"
        width="150"
        align="center"
        label="阶梯数量(包含)"
      >
        <template slot-scope="scope">
          <el-input
            v-if="!isDisable"
            v-model.number="scope.row.productSteppedCount"
            @blur="handlePriceChange(scope.row, scope.$index, $event)"
            placeholder="请输入内容"
            size="small"
          />
          <span v-else>{{ scope.row.productSteppedCount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="productSteppedPrice"
        width="150"
        align="center"
        label="阶梯价格"
      >
        <template slot-scope="scope">
          <el-input
            v-if="!isDisable"
            type="number"
            v-model="scope.row.productSteppedPrice"
            @blur="calculationDiscount(scope.row, scope.$index, $event)"
            placeholder="请输入内容"
            size="small"
          />
          <span v-else>{{ scope.row.productSteppedPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="discount" width="150" align="center" label="折扣">
        <template slot-scope="scope">
          <el-input
            v-if="!isDisable"
            type="number"
            @blur="calculationPrice(scope.row, scope.$index, $event)"
            v-model="scope.row.discount"
            placeholder="请输入内容"
            size="small"
          />
          <span v-else>{{ scope.row.discount }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" align="center" label="备注">
        <template slot-scope="scope">
          <el-input
            v-if="!isDisable"
            v-model="scope.row.remark"
            placeholder="请输入内容"
            size="small"
          />
          <span v-else>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100px"
        fixed="right"
        align="center"
        v-if="!isDisable"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleCopyRow(scope.row, scope.$index)"
            v-if="
              scope.$index !=
              priceModelForm.productSteppedPriceInfoList.length - 1
            "
            >复制</el-button
          >
          <el-button
            type="text"
            @click="handleDeleteRow(scope.row, scope.$index)"
            v-if="
              scope.$index !=
              priceModelForm.productSteppedPriceInfoList.length - 1
            "
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="footer mt16" v-if="!isDisable">
      <el-button size="small" @click="handleCancel">取消</el-button>
      <el-button size="small" class="ml16" type="primary" @click="handleSave"
        >保存</el-button
      >
    </div>
  </div>
</template>
    
    <script>
export default {
  props: {
    formModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isLocked: {
      type: String,
      default: () => {
        return "";
      },
    },
    isShowEdits:{
      type: Boolean,
      default: () => {
        return false;
      },
    },
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  watch: {
    formModel: {
      deep: true,
      handler(newVal, oldVal) {
        this.priceModelForm.productSteppedPriceInfoList =
          this.formModel.productSteppedPriceInfoList;
      },
    },
    priceModelForm: {
      deep: true,
      handler(newVal, oldVal) {
      },
    },
  },
  data() {
    return {
      priceModelForm: {
        productCode: this.productCode,
        productSteppedPriceInfoList: [{}],
      },
      isDisable: true,
    };
  },
  created() {
    // this.priceModelForm.productSteppedPriceInfoList.push({
    //     productSteppedPriceID: 0,
    //       productSteppedPriceCode: "",
    //       productCode: this.productCode,
    //       productSteppedCount: 0,
    //       productSteppedPrice: 0,
    //       discount: 0,
    //       remark: "",
    // })
  },
  methods: {
    handleSort() {
      this.priceModelForm.productSteppedPriceInfoList =
        this.priceModelForm.productSteppedPriceInfoList.sort((a, b) => {
          return a.productSteppedCount - b.productSteppedCount;
        });
    },
    //表格选择事件
    handlePriceChange(row, index, event) {
      if (
        !this.priceModelForm.productSteppedPriceInfoList[
          this.priceModelForm.productSteppedPriceInfoList.length - 1
        ].productSteppedCount &&
        !this.priceModelForm.productSteppedPriceInfoList[
          this.priceModelForm.productSteppedPriceInfoList.length - 1
        ].productSteppedPrice &&
        !this.priceModelForm.productSteppedPriceInfoList[
          this.priceModelForm.productSteppedPriceInfoList.length - 1
        ].discount &&
        !this.priceModelForm.productSteppedPriceInfoList[
          this.priceModelForm.productSteppedPriceInfoList.length - 1
        ].remark
      ) {
        this.priceModelForm.productSteppedPriceInfoList.splice(
          this.priceModelForm.productSteppedPriceInfoList.length - 1,
          1
        );
      }
      this.handleSort();
      // let state = true;
      // this.priceModelForm.productSteppedPriceInfoList.forEach((item) => {
      //   if (!item.productSteppedCount) {
      //     state = false;
      //   }
      // });
      // if (state) {
      this.priceModelForm.productSteppedPriceInfoList.push({
        productSteppedPriceID: 0,
        productSteppedPriceCode: "",
        productCode: this.productCode,
        productSteppedCount: 0,
        productSteppedPrice: 0,
        discount: 0,
        remark: "",
      });
      // }
    },

    //删除
    handleDeleteRow(row, index) {
      this.priceModelForm.productSteppedPriceInfoList.splice(index, 1);
    },

    //复制
    handleCopyRow(row, index) {
      this.priceModelForm.productSteppedPriceInfoList.splice(
        index,
        0,
        JSON.parse(JSON.stringify(row))
      );
      this.priceModelForm.productSteppedPriceInfoList[
        index + 1
      ].productSteppedCount = JSON.parse(
        JSON.stringify(row.productSteppedCount + 1)
      );
    },

    //计算折扣
    calculationDiscount(row, index) {
      if (row.productSteppedPrice) {
        console.log(row.productSteppedPrice);
        row.productSteppedPrice = JSON.parse(
          Number(row.productSteppedPrice).toFixed(4)
        );
        row.discount =
          row.productSteppedPrice / this.formModel.baseData.productPrice;
        row.discount = JSON.parse(row.discount.toFixed(4));
      }
    },

    //计算阶梯价格
    calculationPrice(row, index) {
      if (row.discount) {
        row.discount = JSON.parse(Number(row.discount).toFixed(4));
        row.productSteppedPrice =
          this.formModel.baseData.productPrice * row.discount;
        row.productSteppedPrice = JSON.parse(
          row.productSteppedPrice.toFixed(4)
        );
      }
    },

    //编辑
    handleEdit() {
      if(this.isShowEdits){
        this.isDisable = false
        this.isShowEdits = false
        this.$emit('showEditEvent',this.isShowEdits)
        this.priceModelForm.productSteppedPriceInfoList.push({
        productSteppedPriceID: 0,
        productSteppedPriceCode: "",
        productCode: this.productCode,
        productSteppedCount: 0,
        productSteppedPrice: 0,
        discount: 0,
        remark: "",
      });
      }else{
        this.$message.warning('有未保存的编辑，请保存后再编辑')
      }
    },

    //保存
    handleSave() {
      this.priceModelForm.productSteppedPriceInfoList =
        this.priceModelForm.productSteppedPriceInfoList.sort((a, b) => {
          return a.productSteppedCount - b.productSteppedCount;
        });
      this.priceModelForm.productSteppedPriceInfoList.forEach((item, index) => {
        if (!item.productSteppedCount) {
          this.priceModelForm.productSteppedPriceInfoList.splice(index, 1);
        }
      });
      this.$api.business
        .UpdateProductSteppedPriceInfo(this.priceModelForm)
        .then((res) => {
          this.isDisable = true;
          let obj = {
            state: 2,
            productCode: this.productCode,
          };
          this.$api.business.UpdateProductState(obj).then((res) => {
            this.$message.success("保存成功");
            this.getDetail(this.productCode);
            this.isShowEdits = true
            this.$emit('showEditEvent',this.isShowEdits)
          });
        })
        .catch(() => {
          this.priceModelForm.productSteppedPriceInfoList.push({
            productSteppedPriceID: 0,
            productSteppedPriceCode: "",
            productCode: this.productCode,
            productSteppedCount: 0,
            productSteppedPrice: 0,
            discount: 0,
            remark: "",
          });
        });
    },

    //取消
    handleCancel() {
      this.$confirm("信息尚未保存，是否保存?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.handleSave();
        })
        .catch(() => {
          this.getDetail(this.productCode);
          this.isDisable = true;
          this.isShowEdits = true
            this.$emit('showEditEvent',this.isShowEdits)
        });
    },

    //获取详情
    getDetail(id) {
      this.$emit("init", "");
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}
</style>
    